<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        前端程序员的约定语法
            1、当方法名首字母大写 表示该函数为 对象构造函数，必须使用 new 关键字进行对象创建
            2、当变量和方法名 以 _ 开头 表示该变量或方法为 私有变量和方法，不建议开发者调用
            3、变量名使用 名词定义 ，方法名使用 动词定义
            4、方法名在条件允许的情况下，建议可以直观表示方法功能和条件
    -->
    <!-- 
        1、vue库的加载
            该库会在浏览器的 window 对象上添加 新变量  Vue
            ƒ Vue (options) {
                if ( !(this instanceof Vue) ) {
                    warn('Vue is a constructor and should be called with the `new` keyword');
                }
                this._init(options);
            }
    -->
    <script src="./js/vue.js"></script>
    <!-- <script src="./js/vue.min.js"></script> -->
    <script>

        console.log(window);
        console.log(window.Vue);

        window.onload = function () {
            // new Vue({
            //     el: "#root",
            //     data: {
            //         msg: "初始化数据",
            //         arr: [1, 2, 3, 4, 5, 56, 67, "asdasd", "asdasdas"]
            //     },
            //     methods: {
            //         showMsgTip() {
            //             alert(this.msg)
            //         }
            //     }
            // })

            
            // 2、定义对象配置，完成 new Vue() 调用和配置传入
            let options = {
                // 配置的定义直接影响 vue实例和 HTML 操作关系
                // vue的学习：a、配置的定义 b、页面的语法

                // options 取值 Object  key:value
                //      key:是vue提供特殊功能的描述关键字  
                //      value:的取值因配置项赋予功能配置，取值类型不同

                // el : element select
                //      -> String：符合css 规则的元素选择器
                //      -> Element: 加载的DOM对象
                el: "#root",
                // el:document.querySelector("#root"),

                // data:取值Object，为当前 vue实例 提供对应的 页面容器 的变量调用区域 - 数据仓库
                data: {
                    msg: "初始化数据",
                    arr: [1, 2, 3, 4, 5, 56, 67, "asdasd", "asdasdas"]
                },
                // methods:取值Object，当前vue实例 对应 页面容器的 事件监听的回调函数调用区域 - 方法仓库
                //      key 为方法名  value 为方法的匿名函数
                methods: {
                    showMsgTip:function(){
                        alert(this.msg)
                    }
                    // ES6 对象定义的简写语法
                    // showMsgTip() {
                    //     alert(this.msg)
                    // }
                }
            }

            // vue API 文档中约定 名称 vm 表示基于 Vue构造器创建一个对象
            let vm = new Vue(options);
            console.log("vm:", vm);
        }
    </script>
</head>

<body>
    <!-- <hr id="root"> -->
    <div id="root">
        <!-- 页面的中数据在只能在对应实例的数据仓库中获取 -->
        <h1>{{ msg }}</h1>
        <!-- <h1>{{ aaaa }}</h1> -->
        <!-- v-model 为vue指令-双向数据绑定 -->
        <input type="text" v-model="msg">
        <!-- @事件名="callback" vue的标签事件绑定语法(指令v-on) -->
        <input type="button" value="提示msg数据" @click="showMsgTip">
        <hr>
        <ul>
            <!-- v-for 为vue指令-标签循环 -->
            <li v-for=" item in arr">{{ item }}</li>
        </ul>
    </div>

</body>

</html>